<template>
  <view class="box padding">
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
      <u-form-item label-width="100px" label="订单编号" prop="form.Nid" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>

      <!-- 时间选择 -->
      <u-form-item label-width="100px" label="日期" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 时间选择 -->
      <!-- <u-datetime-picker mode="date" :show="showData" :showToolbar="false" v-model="model1.form.data"
        @confirm="selectData()" @cancel="showData = false"></u-datetime-picker> -->


      <!-- 类型选择 -->

      <u-form-item label-width="100px" label="类型" prop="form.sex" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>

      <!-- 用户名称 -->
      <u-form-item label-width="100px" label="客户名称" prop="form.name" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>

      <!-- 用户手机号 -->
      <u-form-item label-width="100px" label="客户电话" prop="form.phone" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 用户地址 -->
      <u-form-item label-width="100px" label="用户地址" prop="form.address" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>

      <!-- 销售员 -->
      <u-form-item label-width="100px" label="销售员" prop="form.address" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 付款方式 -->
      <u-form-item label-width="100px" label="付款方式" prop="form.address" borderBottom ref="item1">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>

      <!-- 生产人员 -->
      <u-form-item label-width="100px" label="生产人员" prop="form.producer" borderBottom ref="item1">

      </u-form-item>

      <view class="producePerson">
        <view>
          <u-avatar src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"></u-avatar>
        </view>
        <view>
          王师傅
        </view>
        <view>
          电话：18878781616
        </view>
      </view>

      <!-- 商品 -->
      <u-form-item label-width="100px" label="商品" prop="form.producer" borderBottom ref="item1">

      </u-form-item>
      <view class="goods-contaienr">
        <view class="goods-image">
          <!-- <u-image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px"
            height="80px"></u-image> -->
          <image style="width: 80px;height: 80px;" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="scaleToFill" />
        </view>
        <view class="goods-info">
          <view class="top">
            <view class="name">
              老鹰卡钳GT403 钢
            </view>
            <view class="price">
              ￥457.00
            </view>
          </view>
          <view class="content">
            <view>
              货号：GTD456774
            </view>
            <view>
              <span style="margin-right:20rpx">单位/对</span>
              <span>数量1</span>
            </view>
          </view>
          <view class="content">
            规格：80*30*0.12
          </view>

        </view>
      </view>

      <!-- 是否组装 true组装 false不组装-->
      <u-form-item borderBottom label-width="90px" label="邮寄方式">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 是否组装 true组装 false不组装-->
      <u-form-item borderBottom label-width="90px" label="组装">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 定金或全款 true全款 false定金-->
      <u-form-item borderBottom label-width="90px" label="合计">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 邮寄方式 true包邮 false到付-->
      <u-form-item borderBottom label-width="90px" label="已收全款">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 邮寄方式 true包邮 false到付-->
      <u-form-item borderBottom label-width="90px" label="提成">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
      <!-- 邮寄方式 true包邮 false到付-->
      <u-form-item borderBottom label-width="90px" label="生产提成">
        <view class="right-text">{{ model1.form.money }}元</view>
      </u-form-item>
    </u-form>


    <view class="viewImage">
      <view>
        全款转账截图
      </view>
      <view>
        <image v-for="(image, index) in imageList" :key="index" :src="image" @click="previewImage(index)"
          mode="aspectFill" style="width: 100px; height: 100px; margin: 10px;" />
      </view>
    </view>

    <u-modal :show="refuse" :closeOnClickOverlay="true" title="驳回" showCancelButton showConfirmButton
      @close="refuse = false" @confirm="confirm" ref="uModal">
      <view class="slot-content" style="width:100%">
        <textarea v-model="textValue" placeholder="请输入文本" class="textarea" auto-height
          show-confirm-bar="false"></textarea>
      </view>
    </u-modal>


    <!-- 底部固定栏 -->
    <view class="bottom-body" style="height:80px">
      <view class="bottom-container">
        <view style="gap:20px;padding:0 20px;display:flex;width:80%">
          <u-button type="warning" @tap="refuse = true">驳回</u-button>
          <u-button type="warning">清单</u-button>
          <u-button type="primary">通过审核</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refuse: false,
      showSex: false,//是否显示性别选择器
      showData: false,//是否显示日期选择器
      showProducer: false,//是否显示生产人员选择器
      imageList: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg'],
      //当前的类型
      type: '无三大件定制',


      columns: [
        ['王师傅18878787878', '刘师傅18878787878', '吴师傅18878787878']
      ],


      radiolist1: [{
        name: '无三大件定制',
        disabled: false
      },
      {
        name: '锂电池',
        disabled: false
      },
      {
        name: '其他',
        disabled: false
      },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: '无三大件定制',

      model1: {
        form: {
          Nid: 'XDD20240124004',
          sex: '',
          data: '2024-01-24',
          name: '',//用户名称
          phone: '',//电话
          address: '',//地址
          describe: '',//描述
          producer: '',//生产人
          goods: [
            {
              name: '不让他呢GT403 钢1',
              hh: '货号：GTD456774',
              gg: '规格：80*30*0.12',
              prize: '￥457',
              danwei: '单位/对',
              num: '数量1'
            },
            {
              name: '而被认为GT403 钢2',
              hh: '货号：GTD456774',
              gg: '规格：80*30*0.12',
              prize: '￥457',
              danwei: '单位/对',
              num: '数量1'
            },
            {
              name: '老鹰卡钳GT403 钢3',
              hh: '货号：GTD456774',
              gg: '规格：80*30*0.12',
              prize: '￥457',
              danwei: '单位/对',
              num: '数量1'
            }
          ],//商品
          isAssemble: false,//true组装 false不组装
          ismoney: false,//true全款 false定金
          post: false,//true包邮 false到付
          money: '8999.8',//金额
          imgurl: '',//转款截图
          notes: '',//备注


          // 锂电的情况
          load: '',//容量
          model: '',//车型
          proboard: '',//保护板
          deposit: '',//定金

          //无三大定制化的情况
          jzcolor: '',//减震颜色
          kqcolor: '',//卡钳颜色
          lgcolor: '',//轮毂颜色
          ckcolor: '',//车壳颜色
        },
      },

      rules: {
        'form.Nid': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'form.data': {
          type: 'string',
          required: true,
          message: '请选择日期',
          trigger: ['blur', 'change']
        },
        'form.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'form.address': {
          type: 'string',
          required: true,
          message: '请填写地址',
          trigger: ['blur', 'change']
        },
        'form.phone': {
          type: 'string',
          required: true,
          message: '请填写手机号',
          trigger: ['blur', 'change']
        },
        'form.producer': {
          type: 'string',
          required: true,
          message: '请填写生产人',
          trigger: ['blur', 'change']
        },
        'form.goods': {
          type: 'string',
          required: true,
          message: '请填写商品',
          trigger: ['blur', 'change']
        },
        'form.goods': {
          type: 'string',
          required: true,
          message: '请上传转款截图',
          trigger: ['blur', 'change']
        },
        'form.load': {
          type: 'string',
          required: true,
          message: '请输入容量',
          trigger: ['blur', 'change']
        },
        'form.model': {
          type: 'string',
          required: true,
          message: '请输入车型',
          trigger: ['blur', 'change']
        },
        'form.proboard': {
          type: 'string',
          required: true,
          message: '请输入保护板',
          trigger: ['blur', 'change']
        },
        'form.deposit': {
          type: 'string',
          required: true,
          message: '请输入定金',
          trigger: ['blur', 'change']
        },




      },
      radio: '',
      switchVal: false
    };
  },
  methods: {
    //预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.imageList
      });
    },
    openDeleteGoods(i) {
      const _this = this
      //删除商品弹窗
      uni.showModal({
        title: '提示',
        content: '是否删除商品',
        // #ifdef APP-PLUS
        showCancel: false,
        // #endif
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            _this.deleteGoods(i)
          }
        }
      })
    },
    deleteGoods(i) {
      console.log('%c [ i ]-370', 'font-size:13px; background:pink; color:#bf2c9f;', i)
      //删除商品
      this.model1.form.goods.splice(i, 1)
    },
    //预览图片
    openImg() {
      let imgsArray = this.model1.form.imgurl.split(',');
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    //删除图片弹窗
    openDeleteImg() {
      const _this = this
      //弹框确认是否删除图片
      uni.showModal({
        title: '提示',
        content: '是否删除转款截图',
        // #ifdef APP-PLUS
        showCancel: false,
        // #endif
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            _this.deleteImgUrl()
          }
        }
      })
    },
    //删除图片
    deleteImgUrl() {
      this.model1.form.imgurl = ''
    },
    //选择图片
    choosePhoto() {
      const _this = this;
      uni.chooseImage({
        count: 1, //最多可以选择的图片张数，默认9
        sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
        sizeType: ['original'],//original 原图，compressed 压缩图，默认二者都有
        success(res) {
          console.log('选择图片完成', res)
          // 调用上传图片的接口
          // _this.uploadPhoto(res.tempFilePaths);
          _this.model1.form.imgurl = res.tempFilePaths[0]
          console.log('%c [ res.tempFilePaths[0] ]-261', 'font-size:13px; background:pink; color:#bf2c9f;', res.tempFilePaths[0])
        },
        fail() {
          console.log('失败', err);
        },
        complete() {
          console.log('结束');
        },
      })
    },

    changeMoney() {
      console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
      this.model1.form.ismoney = e
    },
    changePost() {
      console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
      this.model1.form.post = e
    },
    changeAb(e) {
      console.log('%c [ e ]-195', 'font-size:13px; background:pink; color:#bf2c9f;', e)
      this.model1.form.isAssemble = e
    },
    selectProducer(e) {
      console.log('%c [ e ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', e)
      this.showProducer = false
      this.model1.form.producer = e.value[0]
    },
    // groupChange(n) {
    // 	console.log('groupChange', n);
    // },
    radioChange(n) {
      console.log('radioChange', n);
      this.radiovalue1 = n
    },
    selectData(e) {
      this.showData = false;
      console.log('%c [ e ]-76', 'font-size:13px; background:pink; color:#bf2c9f;', e)
      //时间戳转日期
      let date = new Date(e.value)
      console.log('%c [ date ]-80', 'font-size:13px; background:pink; color:#bf2c9f;', date)

    },
    sexSelect(e) {
      this.model1.form.sex = e.name
      this.$refs.uForm.validateField('form.sex')
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
};
</script>

<style lang="scss" scoped>
.textarea {
  width: 100%;

  height: 200rpx !important;
  /* 文本域高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
}

.textarea::placeholder {
  color: #ccc;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.bottom-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.viewImage {
  margin-top: 20rpx;
  z-index: 999;
  display: flex;
  justify-content: space-between;
}

.right-text {
  font-weight: 500;
  font-size: 20px;
  text-align: right;
}

.goods-contaienr {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
  margin-top: 20rpx;
  border-bottom: 1px dashed #d6d7d9;

  .goods-image {
    width: 100px;
    margin-right: 20rpx;
    background: #ffffff;
  }

  .goods-info {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .top {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 30rpx;
        font-weight: 800;
      }

      .price {
        font-size: 30rpx;
        font-weight: 800;
      }
    }

    .content {

      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #979797;
    }
  }

}

.producePerson {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.goodsImg {
  width: 50px;
  height: 50px;

  img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}

.sumbit {
  width: 100%;
  height: 88px;
  text-align: center;
  color: #fff;
  background: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .btn {
    width: 250px;
    height: 40px;
    background-color: #3C9CFF;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
  }
}

.bgup {
  width: 174px;
  height: 300px;
  background: whitesmoke;
  position: relative;

  .guan {
    position: absolute;
    top: -20px;
    right: -20px;

  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.bg {
  text-align: center;
  width: 174px;
  height: 138px;
  background-image: url('');
  background-size: cover;


}

.zhuankuan {
  text-align: center;
}

.box {}

.switchtext {
  width: 50px;
  line-height: 25px;

}

.seebtn {
  width: 100px;
  height: 20px;
  padding: 4px;
  text-align: center;
  background: #3C9CFF;
  color: #fff;
  margin-top: 10px;
  border-radius: 4px;

}
</style>
